import React from "react";
import { Input, Select, Carousel } from "antd";
import type { SearchProps } from "antd/es/input/Search";
import { InstagramOutlined } from "@ant-design/icons";
import recomendStyles from "./index.module.less";
import logo from "../../../image/one.jpg";
import swiper1 from "../../../image/swiper1.jpg";
import swiper2 from "../../../image/swiper2.jpg";
import swiper3 from "../../../image/swiper3.jpg";
import swiper4 from "../../../image/swiper4.jpg";
import swiper5 from "../../../image/swiper5.jpg";
const { Search } = Input;

const onSearch: SearchProps["onSearch"] = (value, _e, info) => {
  console.log(info?.source, value);
};

// 前置下拉
const selectBefore = (
  <Select defaultValue="全部">
    <option value="全部">全部</option>
    <option value="H5">H5</option>
  </Select>
);
// 拍照icon
const suffix = (
  <InstagramOutlined
    style={{
      fontSize: 22,
      color: "#ccc",
    }}
  />
);
function index() {
  return (
    <div>
      {/*========== 头部搜索栏 */}
      <div className={recomendStyles.topSearch}>
        <a
          href="https://www.eqxiu.com/mc/?bt=ad&qrc=18631"
          className={recomendStyles.img}
        >
          <img src={logo} alt="" />
        </a>

        {/* 搜索框 */}
        <Search
          placeholder="抽奖"
          addonBefore={selectBefore}
          onSearch={onSearch}
          enterButton
          suffix={suffix}
        />
        {/* 日历 */}
        <div className={recomendStyles.calendar}></div>
      </div>
      {/*========== 轮播图 */}
      <Carousel
        autoplay
        arrows
        infinite={false}
        autoplaySpeed={2000}
        style={{ borderRadius: 20 }}
      >
        <img src={swiper1} alt="" />
        <img src={swiper2} alt="" />
        <img src={swiper3} alt="" />
        <img src={swiper4} alt="" />
        <img src={swiper5} alt="" />
      </Carousel>
      {/*========== 卡片轮播 */}
      <a href="" className={recomendStyles.aColor}>
        ·1111111111
      </a>
    </div>
  );
}

export default index;
